{extend name="base"/}
{block name="main"}
<style>
    input[type="checkbox"] + label::before {
        content: "\a0";  /*不换行空格*/
        display: inline-block;
        vertical-align: .2em;
        height: 18px;
        width: 18px;
        font-size: 22px;
        margin-right: .2em;
        border-radius: .2em;
        background-color: white;
        border: 1px solid #93a1a1;
        text-indent: .15em;
        line-height: .65;  /*行高不加单位，子元素将继承数字乘以自身字体尺寸而非父元素行高*/
    }
    input[type="checkbox"]:checked + label::before {
        content: "\2714";
        background-color:#00a0e9;
        color: white;
        height: 18px;
        width: 18px;
        font-size: 22px;
    }
    input[type="checkbox"] {
        position: absolute;
        clip: rect(0, 0, 0, 0);
        cursor:pointer;
    }
</style>
<meta name="referrer" content="never">
<link href="/public/static/umedito/themes/default/_css/umeditor.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/public/css/defau.css">
<script type="text/javascript" src="/public/static/umedito/third-party/jquery.min.js"></script>
<script type="text/javascript" src="/public/static/umedito/third-party/template.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/public/static/umedito/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/public/static/umedito/_examples/editor_api.js"></script>
<script type="text/javascript" src="/public/static/umedito/lang/zh-cn/zh-cn.js"></script>
<article class="cl pd-20">
    <div id="tab_demo" class="HuiTab" style="margin-bottom: 15px; position:relative;">
        <div class="tabBar clearfix">
            <span onclick="window.location.href='__CONF_SITE__admin/paycontent/index'">内容列表</span>
            <span class="current">添加内容</span>
        </div>
    </div>
    <form action="" method="post" class="form form-horizontal" id="main">
        <input type="hidden" value="{$info.id}" name="id">
        <div class="row cl" style="margin-top:2px;display: flex;align-items: center;">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>内容类型：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="radio" name="paycontent_type" value="0" v-model="paycontent_type" style="margin-right: 2px;"/>文章
                <input type="radio" name="paycontent_type" value="1" v-model="paycontent_type" style="margin-left: 8px;margin-right: 2px;"/>音频
                <input type="radio" name="paycontent_type" value="2" v-model="paycontent_type" style="margin-left: 8px;margin-right: 2px;"/>视频
            </div>
        </div>
        <div class="row cl" style="margin-top:2px;display: flex;align-items: center;">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>是否收费：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="radio" name="free" value="0" v-model="free" style="margin-right: 2px;"/>收费
                <input type="radio" name="free" value="1" v-model="free" style="margin-left: 8px;margin-right: 2px;"/>免费
            </div>
        </div>
        <div class="row cl" v-if="free == 0">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>费用：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <input style="width: 500px;" type="number" autocomplete="off" value="{$info.price > 0 ? $info.price : ''}" placeholder="设置费用,此内容将单独收费,如若使用套餐,请置空或者设置成0" class="input-text" name="price" id="price">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>内容标题：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <input type="text" autocomplete="off" value="{$info.title}" placeholder="内容标题" class="input-text" name="title" id="title">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>内容分类：</label>
            <div class="formControls col-xs-8 col-sm-2">
                <span class="select-box">
					<select class="select" size="1" id="class_id" name="class_id">
						<option value="-1">请选择</option>
                        {volist name="class_list" id="c"}
                        <option value="{$c['id']}" {if $info['class_id'] == $c['id']}selected{/if}>
                           {$c.name}
                        </option>
                        {/volist}
					</select>
				</span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>内容合集：</label>
            <div class="formControls col-xs-8 col-sm-2">
                <span class="select-box">
					<select class="select" size="1" id="group_id" name="group_id">
						<option value="-1">请选择</option>
                        {volist name="group_list" id="c"}
                        <option value="{$c['id']}" {if $info['group_id'] == $c['id']}selected{/if}>
                           {$c.name}
                        </option>
                        {/volist}
					</select>
				</span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>封面图片：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <p style="height: 165px;width:165px;border: dashed 1px #e5e5e5">
                    <img src="{$info.image}" alt="" id="imgarticle_pic" class="thumbnail">
                </p>
                <div>
				<span>
					<input type="hidden" name="image" value="{$info.image}" id="article_pic"/>
				</span>
                    <input onclick="select_img('1','zhu');" class="btn btn-default" type="button" value="选择图片">
                </div>
            </div>
        </div>
        <div class="row cl" v-if="paycontent_type == 1">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>音频链接：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <input type="text" autocomplete="off" value="{$info.audio_url}" placeholder="音频链接" class="input-text" name="audio_url">
            </div>
        </div>
        <div class="row cl" v-if="paycontent_type == 2">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>视频链接：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <input type="text" autocomplete="off" value="{$info.video_url}" placeholder="视频链接" class="input-text" name="video_url">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>浏览量：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="number" autocomplete="off" value="{$info.view ? $info.view : 0}" placeholder="浏览量" class="input-text" name="view">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>收藏量：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="number" autocomplete="off" value="{$info.likes ? $info.likes : 0}" placeholder="收藏量" class="input-text" name="likes">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>初始购买数量：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="number" autocomplete="off" value="{$info.buy_count_init ? $info.buy_count_init : 0}" placeholder="初始购买数量" class="input-text" name="buy_count_init">
            </div>
        </div>
        <div class="row cl" style="margin-bottom: 100px;" v-if="paycontent_type == 0">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>内容：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <div id="editor" type="text/plain" style="width: 100%; height: 500px;"></div>
            </div>
        </div>
        <div class="row cl wq_bottom_btn" style="position: absolute;left: 10px;">
            <div>
                <input class="btn btn-primary radius" onclick="addSuppAjax()" type="button"
                       value="    提交    ">
            </div>
        </div>
    </form>
</article>
{/block}
{block name="script"}
<script src="/public/js/ajax_file_upload.js" type="text/javascript"></script>
<script src="/public/js/file_upload.js" type="text/javascript"></script>
<script src="/public/menu/js/jquery.artdialog.js"></script>
<script src="/public/menu/js/iframetools.js"></script>
<script type="text/javascript">
    var content = '{$info.content}';
    var ue = null;
    var vm = new Vue({
        el: '#main',
        data: {
            paycontent_type:{$info['paycontent_type'] ? $info['paycontent_type'] : 0},
            free:{$info['free'] ? $info['free'] : 0},
        },
        mounted: function(){
            this.$nextTick(function () {
                if(vm.paycontent_type == 0)
                {
                    ue = UM.getEditor('editor',{
                        imageUrl:"__CONF_SITE__app/Umupload/uploadFile", //处理图片上传的接口
                        imageFieldName:"upfile", //上传图片的表单的name
                        imagePath: ""
                    });
                    ue.setContent(content);
                }
            })
        },
        watch:{
            paycontent_type:function (newval,oldval) {
                if(newval == 0)
                {
                    this.$nextTick(function () {
                        ue = UM.getEditor('editor',{
                            imageUrl:"__CONF_SITE__app/Umupload/uploadFile", //处理图片上传的接口
                            imageFieldName:"upfile", //上传图片的表单的name
                            imagePath: ""
                        });
                        ue.setContent(content);
                    });
                }
                else
                {
                    if(ue != null)
                    {
                        if(oldval == 0){content = ue.getContent()}
                        ue.destroy();
                        ue = null;
                        $("#editor").remove();
                    }
                }
            }
        }
    });
    //模块输入信息验证
    function verify(title, class_id, article_pic) {
        if (title == '') {
            layer.msg('内容标题不能为空', {icon: 5, time: 1000});
            return false;
        }
        if (class_id == '-1') {
            layer.msg('请选择内容类型', {icon: 5, time: 1000});
            return false;
        }
        if (article_pic == '') {
            layer.msg('内容封面不能为空', {icon: 5, time: 1000});
            return false;
        }
        return true;
    }
    $("#main").on('submit',function () {
        return false;
    });
    var flag = false;
    //添加用户
    function addSuppAjax() {
        var title = $("#title").val();
        var class_id = $("#class_id").val();
        var image = $("#article_pic").val();
        var data = new FormData($('#main')[0]);
        try {
            content = ue.getContent();
            data.append("content",content);
            data.delete('editorValue');
        }
        catch (e)
        {
        }
        if (verify(title, class_id, image) && !flag) {
            flag = true;
            $.ajax({
                url: "{:url('admin/paycontent/add_paycontent')}",
                type: 'POST',
                cache: false,
                data: data,
                processData: false,
                contentType: false,
                dataType: 'json',
                success:function (res) {
                    console.log(res);
                    flag = false;
                    if (res["code"] > 0) {
                        layer.msg('提交成功!',{icon:1,time:1000},function () {
                            window.parent.location.href = "__CONF_SITE__admin/paycontent/index";
                        });
                    }else{
                        layer.msg(res['message'],{icon:5,time:1000});
                    }
                },
                error:function (err) {
                    console.log(err);
                    flag = false;
                    layer.msg(res['message'],{icon:5,time:1000});
                }
            }).done(function(res) {
            }).fail(function(res) {
            });
        }
    }
    function zhu_images(id,path) {
        $("#article_pic").val(path);
        $("#imgarticle_pic").attr('src',path);
    }
    function select_img(number,type) {
        art.dialog.open(('__CONF_SITE__admin/images/dialogalbumlist&number=' + number + '&type=' + type), {
            lock : true,
            title : "我的图片",
            width : 900,
            height : 620,
            drag : false,
            background : "#000000",
            scrollbar:false,
        }, true);
    }
</script>
{/block}